<template>
  <div style="background-color: #eee">
    <!-- 标题导航 -->
    <van-nav-bar title="值得买" left-arrow>
      <template #left>
        <van-icon name="wap-home-o" size="20" color="black" />
      </template>
      <template #right>
        <van-space>
          <van-icon name="search" size="20" color="black" />
          <van-icon name="cart-o" size="20" color="black" />
        </van-space>
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <div class="swiperTab-container">
      <!-- 轮播图标题 -->
      <div class="m-swiperTab-title">
        <img src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" class="u-title" />
        <div class="u-text">严选好物&nbsp;用心生活</div>
        <img src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" class="u-bg" />
      </div>
      <!-- 轮播图本图 -->
      <div class="m-swiper">
        <div class="swiper-container u-swiperContainer swiper-container-horizontal swiper-container-android"
          style="height: 5.4rem">
          <van-swipe class="swiper-slide" :loop="false" :width="88">
            <van-swipe-item v-for="(nav, index) in swiperList" :key="index" class="u-group">
              <a v-for="(item, index) in nav" :key="index" href="javascript:;"
                data-yxstat='{"event_name":"click_recognition_contentcol","event_action":"click","page_name":"recognition","parameters":{"sequen":3,"name":"植系空间"}}'
                :class="index % 2 === 1 ? 'u-item u-bottom' : 'u-item'">
                <div class="m-topContainer">
                  <!----><!---->
                  <img :src="item.picUrl" class="u-topPic" />
                </div>
                <div class="m-detail">
                  <div class="u-mainText">{{ item.mainTitle }}</div>
                  <div class="u-descText">{{ item.viceTitle }}</div>
                </div>
              </a>
            </van-swipe-item>

            <template #indicator="{ active }">
              <div class="custom-indicator">
                <div v-for="item in totalIndicator" :class="active === item - 1
                  ? 'circle-indicator active-indicator'
                  : 'circle-indicator'"></div>
              </div>
            </template>
          </van-swipe>
        </div>
      </div>
    </div>
    <!-- 瀑布流 -->
    <div class="m-wrappers">
      <div class="m-lookList">
        <div class="m-lookColumn" v-masonry>
          <!-- 小组件 -->
          <div class="m-lookBlock" v-masonry-tile v-for="(item, index) in recommendationList" :key="index">
            <!-- 图片 -->
            <img :src="item.picUrl" alt="" class="imag" />

            <div class="m-lookDesc">{{ item.title }}</div>
            <div class="u-placeHolder"></div>
            <div class="m-lookDetail">
              <div class="m-userInfo">
                <img :src="item.avatar" class="m-userpic" />
                <div class="m-userName">{{ item.nickname }}</div>
              </div>
              <div class="m-upArea">
                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" class="m-hand" />
                <div class="m-upText">{{ item.readCount }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="m-lookColumn"></div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: "worthbuy",
});
</script>

<script lang="ts" setup>
import { defineComponent, onMounted, ref, computed } from "vue";
import { ReqNavWap, ReqWaterfallFlow, type CategoryListData, type NavListData } from "../../api/worthbuy";
const navlist = ref<NavListData>([]); //请求的轮播数据
const swiperList = ref<NavListData[]>([]); //处理过的轮播数据
const recommendationList = ref<CategoryListData>([]); //处理过的轮播数据
const page = ref(1); //处理过的轮播数据
const totalNav = computed(() => {
  //动态计算得到轮播图的长度
  return Math.ceil(navlist.value.length / 2);
});
const totalIndicator = computed(() => {
  if (Math.ceil(navlist.value.length / 2) === 0) {
    return 1;
  } else {
    return Math.ceil(navlist.value.length / 2) - 3;
  }
  //动态计算得到轮播图的长度
});
onMounted(() => {
  getNavWap(); //拉取轮播图相关数据
  getWaterfallFlow(); //拉取瀑布流相关数据
  window.addEventListener("scroll", load);
  // console.log(totalIndicator.value+3  )
});

//获取轮播图导航数据
async function getNavWap() {
  const { data } = await ReqNavWap();
  navlist.value = data.navList;
  //处理轮播图数据用于展示
  dealNavList();
}
//处理轮播图数据用于展示
function dealNavList() {
  let i = 0;
  const newList: any[] = [];
  for (i = 0; i < totalNav.value; i++) {
    let newArr: any[] = [];
    newArr.push(navlist.value[i]);
    newArr.push(navlist.value[i + totalNav.value]);
    newList.push(newArr);
  }
  swiperList.value = newList;
}
//获取瀑布流数据
async function getWaterfallFlow() {
  const { data } = await ReqWaterfallFlow(page.value, 1);
  //处理头像字符串
  data.result[0].topics.forEach((item) => {
    item.avatar = item.avatar.replace('"', '');
    recommendationList.value.push(item);
  });
  // recommendationList.value = data.result[0].topics;
  // console.log(recommendationList.value);
}

// 滚动加载事件
const load = throttle(async () => {
  // 变量scrollTop为当前页面的滚动条纵坐标位置
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 变量 windowHeight 是可视区的高度
  let windowHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
  // 变量 scrollHeight 是滚动条的总高度
  let scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;
  // 剩余滚动内容<80
  const bottomOfWindow = scrollHeight - scrollTop - windowHeight <= 80
  console.log(bottomOfWindow)
  if (bottomOfWindow) {
    page.value += 1;
    const { data } = await ReqWaterfallFlow(page.value, 1);
    recommendationList.value = recommendationList.value.concat(
      data.result[0].topics
    );
  }
}, 120);

// 节流
function throttle(fn, wait) {
  // 获取初始时间
  let start = 0;
  return function () {
    let now = new Date().getTime();
    // 判断前后时间戳的差值
    if (now - start < wait) return;
    fn();
    // 重新设置初始时间
    start = now;
  };
}
</script>

<style scoped lang="scss">
.swiperTab-container {
  width: 100%;
  position: relative;
  padding-top: 1.45rem;
  background: #eee;

  .u-title {
    position: absolute;
    width: 1.3rem;
    height: auto;
    top: 0.6rem;
    left: 0.12rem;
    z-index: 2;
  }

  .u-text {
    font-size: 0.3rem;
    line-height: 0.44rem;
    height: 0.44rem;
    position: absolute;
    font-family: PingFangSC-Regular;
    left: 1.46rem;
    top: 0.79rem;
    color: #fff;
    z-index: 100;
  }

  .u-bg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
  }

  .m-swiper {
    width: 9.5rem;
    background: #fff;
    border-radius: 0.16rem;
    margin: 0 auto;

    .swiper-container {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;

      .custom-indicator {
        position: absolute;
        width: 100%;
        left: 0px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;

        text-align: center;

        .circle-indicator {
          height: 3px;
          width: 20px;
          background: rgba(0, 0, 0, 0.1);
          display: inline-block;
          margin-left: 1px;
          margin-right: 1px;
        }

        .active-indicator {
          background-color: red;
        }
      }

      .swiper-slide {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        -o-transition-property: transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform;

        .u-group {
          padding: 0.06rem;
          width: 1.68rem;
          background: #fff;
          padding-top: 0.36rem;
          height: 100%;
          box-sizing: border-box;

          .u-bottom {
            margin-top: 0.28rem;
          }

          .u-item {
            display: inline-block;
            position: relative;
            width: 2.2rem;
            height: 2.01rem;
            word-wrap: break-word;
            word-break: normal;

            .m-topContainer {
              position: relative;
              width: 1.2rem;
              height: 1.2rem;
              margin: 0 auto;

              .u-topPic {
                width: 1.2rem;
                height: 1.2rem;
              }
            }

            .m-detail {
              width: 1.68rem;
              margin-top: 0.08rem;

              .u-mainText {
                font-family: PingFang-SC-Bold;
                font-weight: 700;
                font-size: 0.28rem;
                width: 2.2rem;
                height: 0.4rem;
                white-space: nowrap;
                overflow: hidden;
                color: #333;
                text-align: center;
                line-height: 0.4rem;
              }

              .u-descText {
                width: 2.2rem;
                margin-top: 0.02rem;
                font-family: PingFangSC-Regular;
                font-size: 0.2rem;
                color: #999;
                text-align: center;
                height: 0.3rem;
                line-height: 0.3rem;
                white-space: nowrap;
                overflow: hidden;
              }
            }
          }
        }
      }
    }

    .u-swiperContainer {
      background: #fff;
      border-radius: 0.16rem;
    }
  }
}

.m-wrappers {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #eee;

  .m-lookList {
    width: 10rem;
    min-height: 10rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0 auto;
    margin-top: 0.3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    .m-lookColumn {
      width: 10rem;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-orient: vertical;
      -ms-flex-direction: column;
      flex-direction: column;

      .m-lookBlock {
        width: 4.6rem;
        margin-right: 0.2rem;
        margin-left: 0.2rem;
        margin-bottom: 0.2rem;
        border-radius: 0.16rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow: hidden;
        background-color: #fff;

        .imag {
          width: 4.6rem;
        }

        .m-lookDesc {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          -ms-flex-direction: row;
          flex-direction: row;
          background-color: #fff;

          padding: 0.18rem 0.16rem 0;
          color: #333;
          font-size: 0.28rem;
          line-height: 0.4rem;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          lines: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-family: PingFangSC-Regular;
          text-align: left;
        }

        .u-placeHolder {
          height: 0.17rem;
          background-color: #fff;
        }

        .m-lookDetail {
          width: 4.43rem;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          -ms-flex-direction: row;
          flex-direction: row;
          background-color: #fff;
          font-size: 0.24rem;
          padding: 0.17rem 0.16rem 0.24rem;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;

          .m-userInfo {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: right;
            -ms-flex-pack: right;
            justify-content: right;

            .m-userpic {
              width: 0.48rem;
              height: 0.48rem;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              border-radius: 0.24rem;
              border: 1px solid #d9d9d9;
            }

            .m-userName {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 0.22rem;
              color: #7f7f7f;
              height: 0.48rem;
              line-height: 0.48rem;
              margin-left: 0.08rem;
            }
          }

          .m-upArea {
            width: 1rem;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;

            .m-hand {
              width: 0.32rem;
              height: 0.32rem;
            }

            .m-upText {
              font-size: 0.24rem;
              color: #7f7f7f;
              max-width: 0.9rem;
              text-align: right;
              height: 0.32rem;
              line-height: 0.32rem;

              margin-left: 0.02rem;
            }
          }
        }
      }
    }
  }
}
</style>